<template>
  <div class="yy-screen-schedule">
    <div class="yy-logo">
        <img :src="Logo" alt="">
        <span>丫乙科技</span>
    </div>
    <div class="yy-screen-schedule_source">
      <div class="yy-screen-schedule_title">今日专家号源情况</div>
      <div class="yy-screen-schedule_subtitle">
        <div>时段</div>
        <div>专家</div>
        <div style="flex: 2">科室</div>
        <div>余号</div>
      </div>
      <div class="yy-screen-schedule_list">
        <vue3-seamless-scroll
          :step="1"
          isRemUnit
          :singleHeight="1.2"
          :limitScrollNum="12"
          :singleWaitTime="2000"
          :list="screenData.sources"
          class="yy-screen-schedule_list-scroll"
        >
          <div
            class="yy-screen-schedule_list-scroll-item"
            v-for="(item, index) in screenData.sources"
            :key="index"
          >
            <div>{{ item.time }}</div>
            <div>{{ item.doctorName }}</div>
            <div style="flex: 2">{{ item.departName }}</div>
            <div>{{ item.yh }}</div>
          </div>
        </vue3-seamless-scroll>
      </div>
    </div>
    <div class="yy-screen-schedule_stops">
      <div class="yy-screen-schedule_title">本周停诊专家</div>
      <div class="yy-screen-schedule_subtitle">
        <div>专家</div>
        <div style="flex: 2">科室</div>
        <div style="flex: 3;">停诊日期</div>
      </div>
      <div class="yy-screen-schedule_list">
        <vue3-seamless-scroll
          :step="1"
          isRemUnit
          :singleHeight="1.2"
          :limitScrollNum="12"
          :singleWaitTime="2000"
          :list="screenData.stops"
          class="yy-screen-schedule_list-scroll"
        >
          <div
            class="yy-screen-schedule_list-scroll-item"
            v-for="(item, index) in screenData.stops"
            :key="index"
          >
            <div>{{ item.doctorName }}</div>
            <div style="flex: 2">{{ item.departName }}</div>
            <div style="flex: 3; text-align: center;">{{ item.time }}</div>
          </div>
        </vue3-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { reactive, onBeforeMount, onBeforeUnmount } from "vue";
import ScreenApi from "@/api/screen/ScreenApi";
import Logo from "@/assets/images/yayi_logo.png";
import { tzxx } from "../tzxx";
import { ysxx } from "../ysxx";

let refreshTimeout = null;

const screenData = reactive({
  sources: [],
  stops: [],
  code: "",
});
onBeforeMount(() => {
  listYhxx();
  listTzxx();
});

onBeforeUnmount(() => {
  if (refreshTimeout) {
    clearInterval(refreshTimeout);
  }
});

const startDataRefresh = () => {
  refreshTimeout = setInterval(() => {
    listScheduleEmpl();
    listYhxx();
    listTzxx();
  }, 60 * 1000);
};
const listYhxx = () => {
  // const data = ysxx.data;
  // screenData.sources = data?.length
  //   ? data.map((item) =>
  //       Object.assign({
  //         time: !item.sxw || item.sxw == 0 ? "上午" : "下午",
  //         departCode: item.ksbm,
  //         departName: item.ksmc,
  //         doctorName: item.ysmc,
  //         doctorCode: item.ysdm,
  //         yh: (item.yh || 0) + (item.dtyyyh || 0),
  //       })
  //     )
  //   : [];
  ScreenApi.listYhxx().then((data) => {
    console.log('yhxx:::', data)
    screenData.sources = data?.length ? data.map(item => Object.assign({
      time: !item.sxw || item.sxw == 0 ? '上午' : '下午',
      departCode: item.ksbm,
      departName: item.ksmc,
      doctorName: item.ysmc,
      doctorCode: item.ysdm,
      yh: (item.yh || 0) + (item.dtyyyh || 0)
    })) : []
  })
};

const listTzxx = () => {
  // const data = tzxx.data;
  // screenData.stops = data?.length
  //   ? data.map((item) => {
  //       const tzsj = item.tzsj;
  //       let sjStr = "";
  //       if (tzsj) {
  //         const sjArr = tzsj.split("/");
  //         sjArr.forEach((sj) => {
  //           const sjDate = sj.split("-");
  //           if (sjDate.length === 3) {
  //             sjStr += " " + sjDate[1] + "/" + sjDate[2] + ",";
  //           } else {
  //             sjStr += " " + sjDate;
  //           }
  //         });
  //       }
  //       return Object.assign({
  //         departCode: item.ksbm,
  //         departName: item.ksmc,
  //         doctorName: item.ysmc,
  //         doctorCode: item.ysdm,
  //         time:
  //           sjStr?.lastIndexOf(",") === sjStr.length - 1
  //             ? sjStr.substring(0, sjStr.length - 1)
  //             : sjStr,
  //       });
  //     })
  //   : [];
  ScreenApi.listTzxx().then((data) => {
    screenData.stops = data?.length ? data.map(item => {
      const tzsj = item.tzsj
      let sjStr = ''
      if (tzsj) {
        const sjArr = tzsj.split("/");
        sjArr.forEach(sj => {
          const sjDate = sj.split("-")
          if (sjDate.length === 3) {
            sjStr += " " + sjDate[1] + '/' + sjDate[2] + ","
          } else {
            sjStr += " " + sjDate
          }
        })
      }
      return Object.assign({
        departCode: item.ksbm,
        departName: item.ksmc,
        doctorName: item.ysmc,
        doctorCode: item.ysdm,
        time: sjStr?.lastIndexOf(",") === sjStr.length - 1 ? sjStr.substring(0, sjStr.length - 1) : sjStr
      })
    }) : []
  })
};
</script>

<style scoped lang="scss">
.yy-screen-schedule {
  flex: 0 0 8rem;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: 0.3rem;
  position: relative;
  .yy-logo {
    position: absolute;
    bottom: 0.1rem;
    right: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    img {
      width: 0.5rem;
      height: auto;
    }
    span {
      font-size: 0.3rem;
      color: #001f5c;
    }
  }
  &_source {
    background: #d8f9fd;
    margin: 0.05rem;
    flex: 1;
    border-radius: 0.08rem;
    padding: 0.1rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  &_stops {
    background: #d7fadc;
    margin: 0.05rem;
    flex: 1;
    border-radius: 0.08rem;
    padding: 0.1rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  &_title {
    background: #1b6499;
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    flex: 0 0 0.5rem;
    font-size: 0.5rem;
    padding: 0.1rem;
    border-radius: 0.08rem;
    display: flex;
    justify-content: center;
  }
  &_subtitle {
    flex: 0 0 0.5rem;
    font-size: 0.45rem;
    padding: 0;
    display: flex;
    background: #1b6499;
    margin: 0.05rem 0;
    border-radius: 0.08rem;
    & > div {
      flex: 1;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border-right: 0.01rem solid #8b97f7;
      padding: 0.05rem;
      height: 0.6rem;
    }
    & > div:last-child {
      border-right: 0;
    }
  }
  &_list {
    flex: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    &-scroll {
      height: 100%;
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
    }
    &-scroll-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #001f5c;
      font-weight: 500;
      & > div {
        flex: 1;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-right: 0.01rem solid #8b97f7;
        border-bottom: 0.01rem solid #8b97f7;
        padding: 0.05rem;
        height: 1.2rem;
        font-size: 0.35rem;
        min-width: 0;
        overflow: hidden;
        white-space: normal;
      }
      & > div:last-child {
        border-right: 0;
      }
    }
  }
}
</style>
